import { Meta, Story, Canvas, Source } from '@storybook/addon-docs'
import { DropdownMenu, DropdownMenuItem } from '@v-uik/dropdown-menu'
import {
  createTitle,
  COMPONENTS,
  createStory,
  DocsAlert,
} from '@v-uik/showroom/config'
import {
  Cascading,
  Canvas as CanvasStory,
  CloneElement,
} from '@v-uik/dropdown-menu/examples'
import RawCascading from '!!raw-loader!@v-uik/dropdown-menu/examples/Cascading'
import RawCanvas from '!!raw-loader!@v-uik/dropdown-menu/examples/Canvas'
import RawCloneElement from '!!raw-loader!@v-uik/dropdown-menu/examples/CloneElement'

export const story = createStory(CanvasStory, RawCanvas)

<Meta
  title={createTitle([COMPONENTS.navigation, 'DropdownMenu', 'DropdownMenu'])}
  component={DropdownMenu}
/>

<Story
  name="DropdownMenu"
  parameters={{
    ...story.parameters,
    docs: {
      disable: true,
    },
  }}
>
  {story.component}
</Story>

# DropdownMenu

Компонент DropdownMenu представляет собой выпадающее меню.

## import

```ts
import { DropdownMenu, DropdownMenuItem } from '@v-uik/base'
```

или

```ts
import { DropdownMenu, DropdownMenuItem } from '@v-uik/dropdown-menu'
```

<DocsAlert type="warning">
  Компонент использует <code>React.CloneElement</code>. Перейдите к разделу{' '}
  <a href="#механизм-reactcloneelement">Механизм React.CloneElement</a> чтобы
  узнать подробнее
</DocsAlert>

## DropdownMenuItem

Внутренний компонент выпадающего меню, представляющий собой единичный элемент меню.

<Canvas withSource="none">
  <div style={{ marginBottom: '20em' }}>
    <Cascading />
  </div>
</Canvas>

<Source language="tsx" code={RawCascading} />

## Механизм `React.CloneElement`

Компонент `DropdownMenu` использует механизм `React.CloneElement` для передаваемого `children` и ожидает в качестве `children` один `Child`.
Для него он задает следующие свойства:

| Свойство        | Описание                                                                                        |
| --------------- | ----------------------------------------------------------------------------------------------- |
| `ref`           | Ссылка на DOM-узел                                                                              |
| `role`          | Aria-атрибут. Всегда равен `button`                                                             |
| `aria-haspopup` | Aria-атрибут. Равен `true`, если меню раскрыто, или `false`, если меню закрыто                  |
| `aria-expanded` | Aria-атрибут. Равен `true`, если меню раскрыто, или `undefined`, если меню закрыто              |
| `onKeyDown`     | Функция обратного вызова, которая обрабатывает нажатия клавиш и вызывает обработчики `Dropdown` |

`DropdownMenu` накладывает ограничения на количество компонентов в `children`, так как он ожидает только один `Child`

Ниже представлен пример как передать в качестве `children` пользовательский компонент

<Canvas withSource="none">
  <CloneElement />
</Canvas>

<Source language="tsx" code={RawCloneElement} />

## Связанные компоненты

- [Dropdown](?path=/docs/вспомогательные-компоненты-dropdown-dropdown--dropdown)
